<template>
    <div class="container">
        <HeaderBar />
        <div class="main_view">
            <div class="main_view_title">找回密码</div>
            <div class="main_view_form">
                <div class="main_view_form_control">
                    <input
                        class="main_view_form_control_value"
                        placeholder="输入手机号"
                        v-model="phone"
                    />
                </div>
                <div class="main_view_form_control">
                    <input
                        class="main_view_form_control_value"
                        placeholder="请输入验证码"
                        v-model="code"
                    />
                    <div
                        class="main_view_form_control_code"
                        @click="getCode()"
                    >
                        {{btnText}}
                    </div>
                </div>
                <div class="main_view_form_control">
                    <input
                        class="main_view_form_control_value"
                        placeholder="请输入密码"
                        v-model="password"
                    />
                </div>
                <div class="main_view_form_control">
                    <input
                        class="main_view_form_control_value"
                        placeholder="再次输入密码"
                        v-model="repassword"
                    />
                </div>
            </div>
            <div class="main_view_submit" @click="submit()">确认修改</div>
        </div>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    PostResetPsw,
    GetVerifyCode
} from '@api/api';
export default {
    data() {
        return {
            btnText: '获取验证码',
            phone: '',
            code: '',
            password: '',
            repassword: '',
            flag: true,
            timer: 60,
        }
    },
    components: {
        HeaderBar,
    },
    created () {
    },
    methods: {
        getCode() {
            let _this = this;
            let {
                phone,
            } = _this;
            console.log(phone)
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(phone)) {
                _this.$message.error('请输入正确的手机号!');
                return;
            }
            if (_this.flag) {
                GetVerifyCode({phone: phone})
                    .then(res=>{
                        _this.$message({
                            message: '验证码已发送!',
                            type: 'success'
                        });
                        _this.siv = setInterval(() => {
                            let timer = _this.timer - 1;
                            _this.timer = timer;
                            _this.btnText = `${timer}s后重新获取`;
                            _this.flag = false;
                            if (_this.timer == 0) {
                                _this.flag = true;
                                _this.timer = 60;
                                _this.btnText = '获取验证码';
                                clearInterval(_this.siv);
                            }
                        }, 1000);
                    });
            }
        },
        submit() {
            let {
                phone,
                code,
                password,
                repassword
            } = this;
            let _this = this;
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(phone)) {
                _this.$message.error('请输入正确的手机号!');
                return;
            }
            if (code=='') {
                this.$message.error('验证码不能为空!');
                return;
            }
            if (password == '') {
                _this.$message.error('请输入新密码!');
                return;
            }
            if (repassword != password) {
                _this.$message.error('两次密码输入不一致!');
                return;
            } else {
                let params = {
                    phone,
                    code,
                    password,
                }
                PostResetPsw(params)
                    .then(res=>{
                        _this.$message({
                            message: '密码重置成功!',
                            type: 'success'
                        });
                    })
            }
        }
    }
}
</script>
<style scoped>
.main_view {
    width: 600px;
    margin: 0 auto;
    padding-top: 49px;
}
.main_view_title {
    text-align: center;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 44px;
}
.main_view_form {
    margin-bottom: 50px;
}
.main_view_form_control {
    position: relative;
    margin-bottom: 24px;
}
.main_view_form_control:last-child {
    margin-bottom: 0;
}
.main_view_form_control_value {
    width: 600px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    border: 1px solid #C4C5CB;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    padding-left: 18px;
    box-sizing: border-box;
    outline: none;
    color: #000000;
}
.main_view_form_control_value::placeholder {
    color: #AFB1B9;
}
.main_view_form_control_code {
    position: absolute;
    top: 0;
    height: 50px;
    line-height: 50px;
    right: 0;
    padding-right: 22px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #1D242D;
}
.main_view_submit {
    width: 600px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background: #1D242D;
    border-radius: 25px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CEB68A;
    cursor: pointer;
}
</style>